// 主题管理工具
class ThemeManager {
  constructor() {
    this.isDarkMode = false;
    this.init();
  }

  // 初始化主题
  init() {
    // 检测系统主题偏好
    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
    const isSystemDark = mediaQuery.matches;
    
    // 优先使用保存的主题，否则使用系统主题
    const savedTheme = this.getSavedTheme();
    this.isDarkMode = savedTheme !== null ? savedTheme : isSystemDark;
    
    // 应用主题
    this.applyTheme();

    // 监听系统主题变化
    mediaQuery.addEventListener('change', (e) => {
      // 如果用户没有手动设置过主题，则跟随系统变化
      if (this.getSavedTheme() === null) {
        this.isDarkMode = e.matches;
        this.applyTheme();
      }
    });
  }

  // 从localStorage获取保存的主题
  getSavedTheme() {
    const saved = localStorage.getItem('theme');
    if (saved === 'dark' || saved === 'light') {
      return saved === 'dark';
    }
    return null;
  }

  // 保存主题到localStorage
  saveTheme(isDark) {
    localStorage.setItem('theme', isDark ? 'dark' : 'light');
  }

  // 切换主题
  toggle() {
    this.isDarkMode = !this.isDarkMode;
    this.saveTheme(this.isDarkMode);
    this.applyTheme();
    return this.isDarkMode;
  }

  // 设置主题
  setTheme(isDark) {
    this.isDarkMode = isDark;
    this.saveTheme(this.isDarkMode);
    this.applyTheme();
  }

  // 获取当前主题状态
  getCurrentTheme() {
    return this.isDarkMode ? 'dark' : 'light';
  }

  // 应用主题
  applyTheme() {
    const root = document.documentElement;
    
    if (this.isDarkMode) {
      // 深色模式
      root.classList.add('dark');
      root.classList.remove('light');
      return
      
      // 设置CSS变量
      root.style.setProperty('--el-bg-color', '#1a1a1a');
      root.style.setProperty('--el-text-color-primary', '#ffffff');
      root.style.setProperty('--el-text-color-regular', '#e5e5e5');
      root.style.setProperty('--el-text-color-secondary', '#a3a3a3');
      root.style.setProperty('--el-border-color', '#333333');
      root.style.setProperty('--el-card-bg-color', '#2c2c2c');
      root.style.setProperty('--el-color-primary', '#4096ff');
      root.style.setProperty('--el-color-success', '#00b42a');
      root.style.setProperty('--el-color-warning', '#ff7d00');
      root.style.setProperty('--el-color-danger', '#f53f3f');
      root.style.setProperty('--el-color-error', '#f53f3f');
      root.style.setProperty('--el-color-info', '#86909c');
    } else {
      // 浅色模式
      root.classList.add('light');
      root.classList.remove('dark');
      return
      // 重置CSS变量为默认值
      root.style.setProperty('--el-bg-color', '#ffffff');
      root.style.setProperty('--el-text-color-primary', '#303133');
      root.style.setProperty('--el-text-color-regular', '#606266');
      root.style.setProperty('--el-text-color-secondary', '#909399');
      root.style.setProperty('--el-border-color', '#dcdfe6');
      root.style.setProperty('--el-card-bg-color', '#ffffff');
      root.style.setProperty('--el-color-primary', '#0068B7');
      root.style.setProperty('--el-color-success', '#E5F8E2');
      root.style.setProperty('--el-color-warning', '#FFF5DF');
      root.style.setProperty('--el-color-danger', '#E60012');
      root.style.setProperty('--el-color-error', '#E60012');
      root.style.setProperty('--el-color-info', '#42b8dd');
    }
    
    // 强制重绘以确保样式生效
    document.body.offsetHeight;
  }
}

// 创建全局主题管理器实例
const themeManager = new ThemeManager();

// 导出主题管理器
export default themeManager;

// 导出便捷方法
export const useTheme = () => {
  return {
    isDarkMode: () => themeManager.isDarkMode,
    toggleTheme: () => themeManager.toggle(),
    setTheme: (isDark) => themeManager.setTheme(isDark),
    getCurrentTheme: () => themeManager.getCurrentTheme(),
  };
};
